<template>
  <div class="container" v-if="result.length > 0">
    <div class="row1">
      <img src="./imgs/r-3.png" alt="" />
      <span>{{ result[0].field_name }}</span>
      <countTo :startVal="0" :endVal="Number(result[0].field_value)" :duration="1200" separator=""></countTo>
      <span>{{ result[0].unit }}</span>
      <img class="up" src="./imgs/up.png" alt="" />
      <span> {{ result[0].growth_value }} %</span>
    </div>
    <div class="row2">
      <div v-for="(item, index) in result.slice(1)" :key="index">
        <div>{{ item.field_name }}</div>
        <div>
          <div class="val1">
            <countTo
              class="val"
              :startVal="0"
              :endVal="Number(item.field_value)"
              :duration="1200"
              separator=""
            ></countTo>
            {{ item.unit }}
          </div>
          <div class="val2">
            <img src="./imgs/up.png" alt="" />
            {{ item.growth_value }}%
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
// import * as echarts from 'echarts'
import countTo from 'vue-count-to'
import { postAction, getAction } from '@/api/manage'
export default {
  name: 'lRow1',
  components: { countTo },
  data() {
    return {
      tabs: ['科技平台', '科技企业', '科技人才', '科技成果'],
      active: 0,
      echart: null,
      topList: [
        {
          text: '全社会研发投入经费',
          val: 91.77,
          unit: '亿元',
          tb: 13.4
        },
        {
          text: '全社会研发投入经费',
          val: 91.77,
          unit: '亿元',
          tb: 13.4
        },
        {
          text: '全社会研发投入经费',
          val: 91.77,
          unit: '亿元',
          tb: 13.4
        },
        {
          text: '全社会研发投入经费',
          val: 91.77,
          unit: '亿元',
          tb: 13.4
        }
      ],
      list: [
        { value: 335, name: '国家级文件' },
        { value: 310, name: '省级文件' },
        { value: 234, name: '市级文件' },
        { value: 135, name: '县级文件' }
      ],
      color: ['#79D9F9', '#FF91C2', '#52F8DE', '#F4BB5E', '#60A3FB', '#f7f814', '#FD4DFF'],
      result: []
    }
  },
  async created() {
    const res = await postAction('/topic/data/listAllData/dy_dp_cycx_szjjgs_szjjzb_gk', {})
    this.result = res.result.data
  },
  mounted() {},
  methods: {}
}
</script>

<style lang="scss" scoped>
.container {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
  .row1 {
    width: 386px;
    height: 53px;
    display: flex;
    align-items: center;
    background: url('./imgs/r-1.png') no-repeat center center / 100% 100%;
    font-family: MicrosoftYaHei, MicrosoftYaHei;
    font-weight: bold;
    font-size: 16px;
    color: #ffffff;
    margin-top: 10px;
    padding-left: 20px;
    padding-bottom: 20px;
    img {
      width: 61px;
      height: 54px;
    }
    & > span:nth-child(2) {
      margin: 0 30px 0 20px;
    }
    & > span:nth-child(3) {
      font-family: YouSheBiaoTiHei;
      font-size: 24px;
      color: #19fdf5;
    }
    & > span:nth-child(4) {
      font-size: 14px;
      margin: 3px 10px 0 2px;
    }
    & > span:nth-child(6) {
      font-weight: bold;
      font-size: 20px;
      color: hsla(0, 100%, 62%, 1);
    }
    .up {
      width: 16px;
      height: 18px;
    }
  }
  .row2 {
    width: 386px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 16px;
    color: #fff;
    & > div {
      background: url('./imgs/r-2.png') no-repeat;
      background-size: 100% 100%;
      width: 185px;
      height: 52px;
      display: flex;
      flex-direction: column;
      align-items: center;
      & > div {
        margin-top: -30px;
      }
      & > div:nth-child(2) {
        margin-top: 6px;
        display: flex;
        align-items: center;
      }
      .val1 {
        font-size: 14px;
        margin-right: 6px;
        span {
          font-family: MicrosoftYaHei, MicrosoftYaHei;
          font-weight: bold;
          font-size: 20px;
          color: #ffde00;
          line-height: 0px;
          text-align: center;
          font-style: normal;
          text-transform: none;
        }
      }
      .val2 {
        img {
          width: 12px;
          height: 16px;
          margin-right: -5px;
        }
        font-family: MicrosoftYaHei, MicrosoftYaHei;
        font-weight: bold;
        font-size: 20px;
        color: #ff3e3e;
        line-height: 0px;
        text-align: right;
        font-style: normal;
        text-transform: none;
      }
    }
  }
}
</style>
